<template>
  <!-- ECharts折线图 -->
  <div class="outWrap">
    <div :class="isHorizontalScreen ? 'horizontalEchartsFather' : 'verticalEchartsFather'">
      <!-- 全屏进入退出按钮 -->
      <h3 @click="switchFn" :class="isHorizontalScreen ? 'horizontalIcon' : 'verticalIcon'">
        {{ isHorizontalScreen ? "退出横屏" : "进入横屏" }}
      </h3>
      <!-- echarts部分 -->
      <view :class="isHorizontalScreen ? 'horizontal' : 'vertical'">
        <l-echart ref="chartRef" @finished="init"></l-echart>
      </view>
    </div>
  </div>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				student: {},
				weeks: [],
				option: {},
				myChart: null, // echarts的实例
				isFull: false, // 是否全屏
				isHorizontalScreen: false, // 是否是横向屏幕，默认false，默认是竖向屏幕
			};
		},
		onLoad(options) {
			if (options.name) {
				// 从本地缓存获取数据
				this.student = uni.getStorageSync(options.name);
				this.weeks = uni.getStorageSync('周数年级版');
			} else {
				console.error("Failed to load parameters.");
			}
		},
		watch: {
			// 当横屏进入退出要重绘一下echarts
			isHorizontalScreen(newVal) {
				console.log("横屏切换", newVal);
				this.myChart.setOption(this.option, true);
				this.$nextTick(() => {
					this.resize();
				});
			},
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				this.myChart = await this.$refs.chartRef.init(echarts);
				// chart.setOption(this.option)
				// 处理数据
				const xAxisData = this.weeks.map(week => week); // 横轴: 周数
				const scoreData = this.weeks.map(week => {
					const score = this.getScore(this.student.weeks, week);
					return score !== 'N/A' ? score : 0; // 如果没有分数，则使用0
				});

				// 配置图表
				const option = {
					title: {
						text: '学生每周成绩变化',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						name: '分数'
					},
					series: [{
						data: scoreData,
						type: 'line',
						// smooth: true,//曲线
						lineStyle: {
							color: '#5470C6'
						},
						itemStyle: {
							color: '#5470C6'
						}
					}]
				};
				this.option = option;
				this.myChart.setOption(option)
			},
			getScore(weeks, week) {
				const weekData = weeks.find(w => w.week === week);
				return weekData ? weekData.score : 'N/A';
			},
			getRanking(weeks, week) {
				const weekData = weeks.find(w => w.week === week);
				return weekData && weekData.ranking !== undefined ? weekData.ranking : 'N/A';
			},
			// 获取分数变化
			getScoreChange(week) {
				const currentWeekData = this.student.weeks.find((item) => item.week === week);
				if (!currentWeekData) return 0; // 如果当前周没有数据，返回 0

				// 找到当前周之前的最近一次有考试的数据
				let previousWeekData = null;
				for (let i = week - 1; i >= 1; i--) {
					previousWeekData = this.student.weeks.find((item) => item.week === i);
					if (previousWeekData) break; // 找到第一个有数据的周
				}

				if (!previousWeekData) {
					return '-'; // 如果找不到上一周有考试的数据，返回 '-'
				} else {
					return currentWeekData.score - previousWeekData.score; // 返回分数变化
				}
			},
			// 获取排名变化
			getRankingChange(week) {
				const currentWeekData = this.student.weeks.find((item) => item.week === week);
				if (!currentWeekData || currentWeekData.ranking === undefined) return '-'; // 如果当前周没有数据或没有排名，返回 '-'

				// 找到当前周之前的最近一次有排名的数据
				let previousWeekData = null;
				for (let i = week - 1; i >= 1; i--) {
					previousWeekData = this.student.weeks.find((item) => item.week === i && item.ranking !== undefined);
					if (previousWeekData) break; // 找到第一个有排名的数据周
				}

				if (!previousWeekData) {
					return '-'; // 如果找不到上一周有排名的数据，返回 '-'
				} else {
					return currentWeekData.ranking - previousWeekData.ranking; // 返回排名变化
				}
			},

			resize() {
				this.myChart.resize(); // 窗口大小发生变化的时候重置
			},
			// 切换 水平垂直~全屏默认屏
			switchFn() {
				this.isHorizontalScreen = !this.isHorizontalScreen;
				this.isFull = !this.isFull;
			},
		},
	};
</script>

<style lang="less" scoped>
// 最外层满屏
.outWrap {
  width: 100%;
  height: 100vh;
  background: #e9e9e9;
}

/* 用于给竖向echarts画布定位用 */
.verticalEchartsFather {
  width: 100%;
  height: 50%;
  background-color: #fff;
  position: relative;
}
// 竖向的正常百分比即可
.vertical {
  width: 100%;
  height: 100%;
}

/* 用于给横向echarts画布定位用，横向就旋转90度即可 */
.horizontalEchartsFather {
  transform: rotate(90deg);
  position: relative;
  width: 100%;
}

// 因为横向了，所以颠倒一下
.horizontal {
  width: 100vh;
  height: 100vw;
}

/* 进入横屏和退出横屏两套样式，定位在不同的位置 */
.verticalIcon {
  position: absolute;
  top: 2px;
  right: 6px;
  z-index: 999;
  user-select: none;
}
.horizontalIcon {
  position: absolute;
  top: 2px;
  left: 6px;
  z-index: 999;
  user-select: none;
}
</style>